import React, { useEffect, useReducer } from 'react';
import styles from './index.module.scss';
import ResultLayout from '../../components/result-layout';
import clusterImg from '../../assets/cluster/cluster-down.png';
import StudyStyle from '../../components/study-style';
import Typography from '../../components/typography';
import RecommentHeadImg from '../../assets/result-page-img/recomment/recomment-head';
import RecommentHandle from '../../components/recomment-handle';
import StudyStyleTitle from '../../components/study-style/study-style-title';
import FooterMethondImg from '../../assets/result-page-img/footer-see';

const { Header } = Typography;

const OtherStylePage = (props) => {
  // type主风格 index 下标 data 当前结果数据 percent 比例
  const { type, index, data, percent, currentStyle } = props.location.state;
  console.log(type, index, data, percent, currentStyle);
  // const [count, dispath] = useReducer((state, action) => {
  //   if (action === 'CHANGE') {
  //     if (  )
     
  //   }
  //   return state;
  // }, index);
  const FooterMethodOnClick = () => {
    console.log('我被点击');
    // dispath('CHANGE');
    // console.log(count);
  };
  useEffect(() => {}, [currentStyle]);
  return (
    <ResultLayout type={type}>
      <div className={styles.mainStyle}>
        <div className={styles.title}>
          <div className={styles.styleTest}>专属学习风格测试</div>
          <div className={styles.dnRecomment}>丹尼推荐</div>
        </div>
        <div className={styles.main}>
          <img src={clusterImg} alt="" className={styles.cluster} />
          <div className={styles.pie}></div>
        </div>
        <StudyStyle
          type={type}
          data={data[index].type}
          size="small"
          isShow={true}
          percent={percent}
        />
      </div>
      <img
        src={RecommentHeadImg['recomment_' + type]}
        alt=""
        className={styles.recommentImg}
      />{' '}
      <Header type="recommentTitle">
        根据测试结果，系统为你匹配了适合的学习产品：
      </Header>
      <RecommentHandle type={currentStyle} />
      <div className={styles.footer}>
        <StudyStyleTitle
          type={data[index === 2 ? 3 : 2].type + '_sm'}
          size="small"
          isShow={false}
        >
          {data[index === 2 ? 3 : 2].percent}
        </StudyStyleTitle>
        <img
          src={FooterMethondImg[type]}
          alt=""
          className={styles.footerMethod}
          onClick={FooterMethodOnClick}
        />
      </div>
    </ResultLayout>
  );
};

export default OtherStylePage;
